<template>
    <div class="product-display">
      <h2>商品信息展示</h2>
      <div class="product-info-container">
        <div class="product-info">
          <p>商品名称：{{ productName }}</p>
          <p>商品价格：{{ productPrice }} 元</p>
          <p>商品库存：{{ productStock }} 件</p>
        </div>
        <div class="product-image-container">
          <img :src="currentImage" alt="商品图片" class="product-image">
          <button @click="toggleImage" class="image-toggle-btn">切换图片</button>
        </div>
      </div>
      <div class="text-demos">
        <div>
          <p><span v-text="productDescriptionText"></span></p>
          <p><span v-html="productDescriptionHTML"></span></p>
        </div>
      </div>
      <div class="status-demo">
        <p :class="{ active: isActive, warning: hasWarning }">
          商品状态：{{ productStatusText }}
        </p>
        <button @click="toggleClass">切换状态样式</button>
      </div>
      <div class="v-bind-demos">
        <div :style="productStyle" v-text="productStyleText"></div>
      </div>
      <div class="responsive-data">
        <p>当前编辑模式：{{ editMode }}</p>
        
        <button @click="toggleEditMode">切换编辑模式</button>
        
        <div v-if="editMode" class="edit-container">
          <input v-model="productName" placeholder="商品名称">
          <input v-model.number="productPrice" placeholder="商品价格">
          <input v-model.number="productStock" placeholder="商品库存">
          <input v-model="productDescriptionHTML" placeholder="商品描述">
          <input v-model="imageUrl1" placeholder="商品图片URL1">
          <input v-model="imageUrl2" placeholder="商品图片URL2">
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  
  export default {
    name: 'ProductDisplay',
    setup() {
      // 响应式数据管理
      const productName = ref('智能手机 X1');
      const productPrice = ref(2999);
      const productStock = ref(100);
      const editMode = ref(false);
      
      // 商品图片URL
      const imageUrl1 = ref('https://2b.zol-img.com.cn/product/271_280x210/637/celQo5Bb489Y.jpg');
      const imageUrl2 = ref('https://2e.zol-img.com.cn/product/271_280x210/640/ce8Jp7KHSvz06.jpg');
      const currentImage = ref(imageUrl1.value);
      
      // 切换图片
      const toggleImage = () => {
        currentImage.value = currentImage.value === imageUrl1.value ? imageUrl2.value : imageUrl1.value;
      };
      
      // 商品描述
      const productDescriptionText = ref('这是一款高性能智能手机，支持5G网络');
      const productDescriptionHTML = ref('<strong>高性能智能手机</strong><b>支持5G网络，8核处理器</b>');
      
     const isActive= ref(true);
     const hasWarning = ref(false);
     const productStatusText= ref('youhuoi');
     const toggleClass=()=>{
        isActive.value=!isActive.value;
        hasWarning.value=!hasWarning.value;
     };
      
      // 样式绑定
      const productStyleText = ref('这是样式绑定示例');
      const productStyle = ref({
        color: 'blue',
        backgroundColor: 'lightyellow',
        padding: '10px',
        borderRadius: '5px'
      });
      
      // 切换编辑模式
      const toggleEditMode = () => {
        editMode.value = !editMode.value;
      };
  
      return {
        productName,
        productPrice,
        productStock,
        editMode,
        productDescriptionText,
        productDescriptionHTML,
        productStatusText,
        isActive,
        hasWarning,
        toggleClass,
        productStyle,
        productStyleText,
        imageUrl1,
        imageUrl2,
        currentImage,
        toggleImage,
        toggleEditMode
      };
    }
  };
  </script>
  
  <style>
  .product-display {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-family: Arial, sans-serif;
  }
  
  /* 商品信息和图片并排展示 */
  .product-info-container {
    display: flex;
    margin-bottom: 20px;
  }
  
  .product-info {
    flex: 1;
    background-color: #f5f5f5;
    padding: 15px;
    border-radius: 4px;
    margin-right: 20px;
  }
  
  .product-image-container {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .product-image {
    max-width: 100%;
    border-radius: 4px;
    margin-bottom: 10px;
  }
  
  .image-toggle-btn {
    padding: 5px 10px;
    background-color: #2c3e50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
  
  .text-demos, .status-demo, .v-bind-demos, .responsive-data {
    margin-bottom: 20px;
  }
  
  /* 动态class样式 */
  .active {
    color: green;
    font-weight: bold;
  }
  
  .warning {
    color: red;
  }
  
  /* 样式绑定样式 */
  .v-bind-demos div {
    display: inline-block;
    margin: 10px 0;
  }
  
  /* 编辑模式样式 */
  .edit-container {
    margin-top: 15px;
    border-top: 1px solid #e0e0e0;
    padding-top: 15px;
  }
  
  .edit-container input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
  }
  
  button {
    padding: 8px 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #45a049;
  }
  </style>